<template>
    <div>
        <el-card>
            <div class="wrap">
                <span>规则名称</span>
                <el-input class="input" v-model="guizeInfo.guizename" placeholder="请输入规则名称"></el-input>
            </div>
            <div class="wrap">
                <span>关键字</span>
                <el-input class="input" type="textarea" :rows="4" v-model="guizeInfo.keyword" placeholder="请输入关键字"></el-input>
            </div>
            <div class="wrap">
                <span>消息</span>
                <el-input class="input" type="textarea" :rows="4" v-model="guizeInfo.mesage" placeholder="请输入消息"></el-input>
            </div>
            <div class="send">
                 <el-button type="success" class="fanhuiBtn" @click="toAutoreply">返回</el-button>
                 <el-button type="primary" class="fanhuiBtn" @click="saveGuize">保存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            guizeInfo:{
                guizename:'',
                keyword:'',
                mesage:''
            },
            appId:''
        }
    },
    methods:{
        toAutoreply(){
            this.$router.push({name:"Autoreply",query:{appId:this.appId}})
        },
        saveGuize(){
            this.$http.post('addKeyword',{guizeInfo:this.guizeInfo,appId:this.appId}).then((data)=>{
                if(data.data.success){
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000,
						onClose:()=>{
							this.$router.push({name:"Autoreply",query:{appId:this.appId}})
						}
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        }
    },
    created () {
        this.appId = this.$route.query.appId;
    }
}
</script>

<style scoped>
.el-card{
    margin: 8px;
}
    .wrap{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .wrap>span{
        margin: 0 20px;
        width: 80px;
    }
    .wrap .input{
        width: 700px;
    }
    .send{
        margin: 100px 20px 0;
    }
    .fanhuiBtn{
        /* background-color: #1890ff; */
        color: #fff;
        width: 117px;
        margin: 0 10px 10px;
    }
</style>